import { h } from "vue";
// https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js
// https://zhuanlan.zhihu.com/p/145332205
import gsap from "gsap";
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js

export default {
  install(app: any) {
    app.component('dropdown-transition', {
      render(c: any, context: any) {
        let data = {
          name: 'dropdown-transition-name',
          mode: 'out-in',
          onBeforeEnter(el: any) {
            console.log(el)
            el.style.opacity = 0;
          },
          onEnter(el: any, done: any) {
            gsap.to(el, {
              opacity: 1,
              marginTop: 0,
              delay: el.dataset.index * 0.15,
              onComplete: done,
            });
          },
          // afterEnter
          onLeave(el: any, done: any) {
            gsap.to(el, {
              opacity: 0,
              marginTop: '20px',
              delay: el.dataset.index * 0.15,
              onComplete: done,
            });
          }
        };
        return h(
          'transition', // tag name
          { ...data }, // props/attributes
          c.$slots.default() // array of children
        )
      },
    })
  },
}